<template>
	<view class="pgqs">
		<headertop title="评估趋势" str="orderlist" str1="oridei" back1="#fff"></headertop>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="headerbox" v-if="fenleiarr.length">
			<view class="center">
				<view class="" style="display: inline-block;margin-right:96rpx;" :key="index"
					v-for="(item,index) in  fenleiarr" @click="qiehuan(index)">
					<view :class="active==index?'itembox activecolor':'itembox'">
						<image :src="item['image']" mode=""></image>
						<span>{{item['title']}}</span>
						<view class="active" v-if="active==index">

						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="echartsbox" v-if="fenleiarr.length">
			<view class="centerb">
				<view class="labletitle">
					<image :src="_static('/images/Group 11682@2x.png')" mode=""></image>
					<span v-if="fenleiarr[active]">{{fenleiarr[active]['describe']}}</span>
				</view>
				<l-echart ref="chartRef"></l-echart>
				<view class="shilibox">
					<view class="itebox" v-for="(item,ind) in nrobj['rule']" :key="ind">
						<view class="yanseclor" :style="{'background':item.color}">

						</view>
						{{item.level}}：{{item.min_score}}-{{item.max_score}}分
					</view>

				</view>
			</view>
		</view>
		<view class="msgicon" v-if="!fenleiarr.length">
			<image :src="_static('/images/wxnone.png')" mode="widthFix">
			</image>
			<view class="msgtext">
				暂无内容
			</view>
		</view>
	</view>
</template>
<script setup>
	import ulm, {
		$api
	} from '@/ulm';
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const statusBarHeight = ref('')
	const chartRef = ref(null)
	const barHeight = ref('')
	const nrobj = ref({})
	const active = ref(0)
	const back1 = ref('')
	const fenleiarr = ref([])
	const optiondate = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			confine: true
		},
		legend: {
			data: ['热度', '正面', '负面']
		},
		dataZoom: [ // 数据区域缩放
			{
				type: 'inside',
				start: 0,
				end: 100,
				zoomLock: true
			},
		],
		grid: {
			left: 0,
			right: 0,
			bottom: 15,
			top: 40,
			containLabel: true
		},
		xAxis: {
			type: 'category',
			axisLabel: {
				show: true, // 确保显示标签
				interval: 0, // 强制显示所有标签
				fontSize: 10, // 调整字体大小
			},
			axisTick: {
				show: false
			},
			data: ['08/08', '08/18', '08/28', '09/08', '09/18', '09/28', '10/08']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			barWidth: 17,
			data: [{
				value: 0.2,
				itemStyle: {
					color: '#CAEEFF',
					borderRadius: [8, 8, 0, 0]
				},
				emphasis: {
					focus: 'series'
				},
			}],
			type: 'bar'
		}]
	}
	onLoad(() => {
		qushilistinit()
	})

	function qiehuan(ind) {
		active.value = ind
		evaluationChartsinit()
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	async function qushilistinit() {
		const res = await $api.myEvaluation()
		if (res.code == 1) {
			fenleiarr.value = res.data
			evaluationChartsinit()
		}
	}
	async function evaluationChartsinit() {
		const res = await $api.evaluationCharts({
			evaluation_id: fenleiarr.value[active.value]['evaluation_id']
		})
		if (res.code == 1) {
			nrobj.value = res.data
			optiondate['xAxis']['data'] = res.data.date_list
			optiondate.legend.data = res.data.rule.map(item => item.level)

			var arr = []
			for (var i in res.data['record']) {
				var obj = {
					value: res.data['record'][i]['score'] * 1,
					itemStyle: {
						color: res.data['record'][i]['color'],
						borderRadius: [4, 4, 0, 0],
					}
				}
				arr.push(obj)
			}
			optiondate.dataZoom[0].end = 40
			optiondate.series[0].data = arr
			console.log(optiondate, chartRef.value, 'optiondateoptiondateoptiondate');
			setTimeout(async () => {
				if (!chartRef.value) return
				const myChart = await chartRef.value.init(echarts)
				myChart.setOption(optiondate)
			}, 500)

		}
	}
</script>


<style lang="scss">
	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	page {
		background: #F7F8FA;
	}

	.pgqs {
		width: 100%;
		overflow: hidden;

		.headerbox {
			width: 100%;
			height: 194rpx;
			background: #FFFFFF;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;

			.center {
				width: 686rpx;
				overflow-x: scroll;
				white-space: nowrap;

				.activecolor {
					color: #2AB4F5 !important;
				}

				.itembox {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #1D2129;
					position: relative;

					.active {
						width: 48rpx;
						height: 4rpx;
						background: #2AB4F5;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						margin-top: 20rpx;
					}

					image {
						width: 68rpx;
						height: 68rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.echartsbox {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 36rpx;

			.centerb {
				width: 630rpx;
				margin: auto;
				margin-top: 30rpx;

				.shilibox {
					width: 100%;
					overflow: hidden;
					margin-top: 32rpx;
					display: flex;
					flex-wrap: wrap;

					.itebox {
						width: 300rpx;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #4E5969;
						margin-bottom: 28rpx;

						.yanseclor {
							width: 28rpx;
							height: 28rpx;
							background: #46C3B1;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							margin-right: 12rpx;
						}

						.yanseclor1 {
							width: 28rpx;
							height: 28rpx;
							background: #21EEB5;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							margin-right: 12rpx;
						}
					}
				}

				.labletitle {
					width: 100%;
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #1D2129;

					image {
						width: 34rpx;
						height: 20rpx;
						margin-right: 14rpx;
					}
				}

			}
		}
	}
</style>